body, h1, h2, h3, p, dl, dd, ul, th, td, form, input, button, textarea {
	margin:0;
	padding:0;
		font-family:Microsoft Yahei, Helvetica Neue, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
	font-weight:normal
}
html, body {
	overflow-y:hidden
}
body {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	font-size:24px;
	text-align:center
}
html, #fullscreen {
	display:block;
	padding:0;
	margin:0;
	width:100%;
	height:100%
}
img {
	width:100%;
	height:auto;
	vertical-align:top
}
a {
	text-decoration:none
}
.front_load {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:999998
}
.loading_bg {
	display:block;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:999998;
	background-color:#fff
}
.loading_img {
	position:absolute;
	top:45%;
	z-index:999999;
	width:100%
}
.spinner {
	margin:0 auto;
	width:30px;
	height:30px;
	position:relative
}
.container1>div, .container2>div, .container3>div {
	width:6px;
	height:6px;
	background-color:#00a7ea;
	border-radius:100%;
	position:absolute;
	-webkit-animation:bouncedelay 1.2s infinite ease-in-out;
	animation:bouncedelay 1.2s infinite ease-in-out;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both
}
.spinner .spinner-container {
	position:absolute;
	width:100%;
	height:100%
}
.container2 {
	-webkit-transform:rotateZ(45deg);
	transform:rotateZ(45deg)
}
.container3 {
	-webkit-transform:rotateZ(90deg);
	transform:rotateZ(90deg)
}
.circle1 {
	top:0;
	left:0
}
.circle2 {
	top:0;
	right:0
}
.circle3 {
	right:0;
	bottom:0
}
.circle4 {
	left:0;
	bottom:0
}
.container2 .circle1 {
	-webkit-animation-delay:-1.1s;
	animation-delay:-1.1s
}
.container3 .circle1 {
	-webkit-animation-delay:-1.0s;
	animation-delay:-1.0s
}
.container1 .circle2 {
	-webkit-animation-delay:-0.9s;
	animation-delay:-0.9s
}
.container2 .circle2 {
	-webkit-animation-delay:-0.8s;
	animation-delay:-0.8s
}
.container3 .circle2 {
	-webkit-animation-delay:-0.7s;
	animation-delay:-0.7s
}
.container1 .circle3 {
	-webkit-animation-delay:-0.6s;
	animation-delay:-0.6s
}
.container2 .circle3 {
	-webkit-animation-delay:-0.5s;
	animation-delay:-0.5s
}
.container3 .circle3 {
	-webkit-animation-delay:-0.4s;
	animation-delay:-0.4s
}
.container1 .circle4 {
	-webkit-animation-delay:-0.3s;
	animation-delay:-0.3s
}
.container2 .circle4 {
	-webkit-animation-delay:-0.2s;
	animation-delay:-0.2s
}
.container3 .circle4 {
	-webkit-animation-delay:-0.1s;
	animation-delay:-0.1s
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% {
-webkit-transform:scale(0.0)
}
40% {
-webkit-transform:scale(1.0)
}
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform:scale(0.0);
-webkit-transform:scale(0.0)
}
40% {
transform:scale(1.0);
-webkit-transform:scale(1.0)
}
}


html, body {
	overflow-y:hidden
}
body {
	position:absolute
}
html, #fullscreen {
	padding:0;
	margin:0;
	width:100%;
	height:100%
}
img {
	width:100%;
	height:auto;
	vertical-align:top
}
#front_home {
	position:relative;
	z-index:999;
	top:0;
	-webkit-transform:translate3d(0, 0, 0) scale(1.85)
}
#front_home {
	position:relative;
	z-index:999;
	top:0;
	-webkit-transform:translate3d(0, 0, 0) scale(1.85)
}
.mz_img {
	width:100%
}
#fullscreen {
	position:relative;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:10;
	width:100%;
	max-width:768px;
	height:100%;
	margin:0 auto;
-webkit-transition:all .41s;
	-webkit-transition-delay:cubic-bezier(1, 0.07, 0.6, 0.645);
-moz-transition:all .41s cubic-bezier(1, 0.07, 0.6, 0.645);
-o-transition:all .41s cubic-bezier(1, 0.07, 0.6, 0.645);
transition:all .41s cubic-bezier(1, 0.07, 0.6, 0.645)
}
#fullscreen .header-left img {
	width:80px!important
}
#fullscreen .header-right img {
	width:24px
}



.section {
	display:block;
	position:absolute;
	z-index:19;
	top:100%;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	overflow:hidden;
	-webkit-transform:translateZ(0);
	transform:translateZ(0)
}
.section .title {
	margin:10% 0 3% 0;
	text-align:center;
	color:#ac8ec4;
	line-height:1.4em;
	font-size:1.846em
}
.section .info {
	text-align:left;
	margin-top:5%;
	padding:0 7%;
	color:#999;
	font-size:1em;
	line-height:1.538em
}
.p_relative {
	position:relative
}
.h_100 {
	height:100%
}
.section_child {
	height:100%;
	width:100%;
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	z-index:9998
}
.p_relative {
	position:relative;
	height:100%
}







#home {/*background:url('img/logo.png') no-repeat center 55px #f6f6f6;background-size:100%*/
}
#home .header-wrapper {
	position:relative;
	top:0;
	width:100%;
-moz-transition:all .4s;
-webkit-transition:all .4s;
	z-index:9999
}
#home .title {
	margin-top:5%;
	text-align:left;
	width:43%;
	padding-left: 5%;
}
#home .info {
	margin-top:2%;
	padding:0;
	text-align:left;
	width:43%;
	padding-left: 5%;
}
#home .home_img img {
	bottom:0;
	left:0;
	opacity:0;
	-webkit-transform:translate3d(100%, 0, 0)
}
 #home .home_img .mz_img:nth-child(1) {
-webkit-transition:all .3s ease-out 1.3s;
-webkit-transform:translate3d(-9%, 0, 0)
}
 #home .home_img .mz_img:nth-child(2) {
-webkit-transition:all .3s ease-out 1.3s;
-webkit-transform:translate3d(9%, 0, 0)
}




/*#home .home_img .mz_img:nth-child(3){-webkit-transition:all .3s ease-out .5s;-webkit-transform:translate3d(-9%,0,0)}
	#home .home_img .mz_img:nth-child(4){-webkit-transition:all .3s ease-out .5s;-webkit-transform:translate3d(9%,0,0)}
	#home .home_img .mz_img:nth-child(5){opacity:1;-webkit-transform:translate3d(0,100%,0);-webkit-transition:all .3s ease-out .1s}*/
	#home .home_img .mz_img.on {
	opacity:1;
	-webkit-transform:translate3d(0, 0, 0)
}
#home .meinv1 {
	position:absolute;
	top:15px;
-webkit-transition:all .5s ease-out .5s;
	-webkit-transform:translateY(-100%)
}
#home .meinv1.on {
	-webkit-transform:translateY(0)
}
#home .meinv2 {
	position:relative;
	margin-top:10%;
-webkit-transition:all .5s ease-out 1.1s;
	-webkit-transform:translateX(-100%);
}
#home .meinv2.on {
	-webkit-transform:translateX(0)
}







#screen {
	background-color:#86cb3c
}
#screen p {
	color:#fff;
	opacity:0;
-webkit-transition:opacity 1s ease-out .6s
}
#screen p.on {
	opacity:1
}
#screen .mz_img {
	margin-top:10%;
-webkit-transition:all .5s ease-out 1s;
	-webkit-transform:translateY(-20px) scaleY(1.4)
}
#screen .mz_img.on {
	-webkit-transform:translateY(0) scaleY(1)
}
#cpu p {
	opacity:0;
-webkit-transition:opacity 1s ease-out .5s
}
#cpu p.on {
	opacity:1
}
#cpu .mz_img {
	margin-top:15%
}
#dsds {
	background-color:#ac8ec4;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:right 15%
}
#dsds p {
	padding-left:14%;
	color:#fff;
	text-align:left
}
#dsds .info {
	width:52%
}
/*#dsds .mz_img {
	margin-top:10%;
-webkit-transition:all 1s ease-out .5s;
	-webkit-transform:translateY(100%)
}*/
/*#dsds .mz_img.on {
	-webkit-transform:translateY(0)
}
*/
#dsds .p3_1 {
	margin-top:10%;
-webkit-transition:all 1s ease-out .5s;
	-webkit-transform:translateY(100%)
}
#dsds .p3_1.on {
	-webkit-transform:translateY(0)
	transform: rotate(-5deg);
-ms-transform: rotate(-5deg);		/* IE 9 */
-webkit-transform: rotate(-5deg);	/* Safari and Chrome */
-o-transform: rotate(-5deg);		/* Opera */
-moz-transform: rotate(-5deg);		/* Firefox */
}
#dsds .p3_2 {
	position:relative;
	margin-top:-115%;
	margin-left:6px;
-webkit-transition:all .5s ease-out .3s;
	-webkit-transform:translateY(100%)
}
#dsds .p3_2.on {
	-webkit-transform:translateY(0)
	transform: rotate(-10deg);
-ms-transform: rotate(-10deg);		/* IE 9 */
-webkit-transform: rotate(-10deg);	/* Safari and Chrome */
-o-transform: rotate(-10deg);		/* Opera */
-moz-transform: rotate(-10deg);		/* Firefox */
}
#dsds .p3_3 {
	position:relative;
	margin-top:-120%;
	margin-left:12px;
-webkit-transition:all .5s ease-out .2s;
	-webkit-transform:translateY(100%)
	
}
#dsds .p3_3.on {
	-webkit-transform:translateY(0)
}




#battery p {
	padding:0;
	text-align:left;
	color:#333
}
#battery .battery_text {
	position:absolute;
	top:50%;
	left:50%
}
#battery .info {
	width:90%
}

#battery .phone1 {
	position:absolute;
	top:0;
-webkit-transition:all .5s ease-out .5s;
	-webkit-transform:translateY(-100%)
}
#battery .phone1.on {
	-webkit-transform:translateY(0)
}
#battery .phone2 {
	position:relative;
	margin-top:27%;
-webkit-transition:all .5s ease-out 1.1s;
	-webkit-transform:translateX(-100%)
}
#battery .phone2.on {
	-webkit-transform:translateX(0)
}


#coms {
	background-image:url(../img/6-1.jpg);
	background-size:100%;
	background-repeat:no-repeat;
	background-position:top center
}
#coms p {
	color:#fff
}
#coms .info {
	padding:0 10%
}
#coms .mz_img {
	position: absolute;
	bottom: 0;
	left: 0;
}
#coms p {
	opacity:0;
-webkit-transition:opacity 1s ease-out .5s
}
#coms p.on {
	opacity:1
}
#camera {
	background-color:#f1f1f1
}
#camera .mz_img {
	margin-top:10%;
	opacity:0;
-webkit-transition:opacity .5s ease-out .5s
}
#camera .mz_img.on {
	opacity:1
}
#camera p {
	opacity:0;
	-webkit-transition:opacity 1s ease-out 1s
}
#camera p.on {
	opacity:1
}
#color .color_img {
	margin-top:10%
}
#color .mz_img {
	width:150px;
	opacity:0;
	-webkit-transform:translateX(-34px);
	position:relative;
	top:0;
	left:0
}
#color .mz_img.on {
	opacity:1;
	-webkit-transform:translateX(0)
}
#color .mz_img.on:nth-child(1) {
z-index:5;
-webkit-transition:all .3s ease-out .5s
}
#color .mz_img.on:nth-child(2) {
z-index:4;
-webkit-transition:all .3s ease-out .9s
}
#color .mz_img.on:nth-child(3) {
z-index:3;
-webkit-transition:all .3s ease-out 1.3s
}
#color .mz_img.on:nth-child(4) {
z-index:2;
-webkit-transition:all .3s ease-out 1.7s
}
#color .mz_img.on:nth-child(5) {
z-index:1;
-webkit-transition:all .3s ease-out 2.1s
}
#reserve {
	background-color:#f6f6f6
}
#reserve .price {
	position:relative;
	top:0;
	background-color:#FFF
}
#reserve .mx_reserve {
	padding:8% 5% 5% 8%;
	width:33%;
	float:left
}
#reserve .product_price {
	padding:25% 10% 10% 0;
	width:42%;
	float:right;
	text-align:left
}
#reserve .product_price p {
	font-size:1.385em;
	padding:10% 0;
	border-bottom:1px solid #f7f7f7;
	color:#666
}
#reserve .product_price p:first-child {
	border-top:1px solid #f7f7f7
}
#reserve .product_price span {
	margin-left:5%;
	margin-right:15%
}
#reserve .go_reserve {
	display:block;
	padding:4% 0;
	margin-top:15%;
	text-align:center;
	color:#FFF;
	background-color:#00a7eb;
	font-size:1.385em;
	border-radius:5px;
	position:relative;
	z-index:9999
}
#reserve .mx_yes {
	position:absolute;
	bottom:-11%;
	width:100%
}
#reserve .mx_yes img {
	width:18%
}
#reserve .weixin_number {
	position:relative;
	margin:2% auto 0 auto;
	width:70%;
	padding:1.5% 0;
	font-size:1.538em;
	color:#00a6ee;
	border-radius:5px;
	border:1px solid #00a6ee;
	text-align:center;
-webkit-transition:all .5s ease-out 2.5s;
	z-index:9999
}
#reserve .weixin_number.on {
-webkit-animation:chat .5s ease-out .5s
}
@-webkit-keyframes chat {
50% {
-webkit-transform:scale(1.1)
}
75% {
-webkit-transform:scale(1)
}
85% {
-webkit-transform:scale(1.05)
}
100% {
-webkit-transform:scale(1)
}
}
#reserve .worn {
	margin-top:20%;
	color:#666
}
.fullpage_option {
	position:fixed;
	bottom:7px;
	left:0;
	height:25px;
	width:100%;
	z-index:99
}
.next_screen {
	display:none;
	position:absolute;
	z-index:20;
	top:0;
	width:100%;
	-webkit-transition:all 1s
}
.next_screen.on {
	display:block;
	-webkit-animation:goNext 1.5s infinite
}
@-webkit-keyframes goNext {
0% {
-webkit-transform:translate(0, 0) translateZ(0);
opacity:1
}
100% {
-webkit-transform:translate(0, -20px) translateZ(0);
opacity:.1
}
}
.next_screen img {
	width:22px
}
.mx4_music {
	position:absolute;
	z-index:20;
	bottom:0;
	right:3%;
	width:42px;
	height:42px
}
.mx4_music img {
	width:21px;
	padding-top:8px
}










@media screen and (min-height:0) and (max-height:400px) {
#home .title {
margin-top:8%
}
#home .mz_imgs {
width:70%
}
#home .home_img img {
bottom:-28%
}
#cpu .mz_img {
margin-top:2%
}
}
@media only screen and (max-width:320px) and (min-width:310px) {
body {
font-size:13px;
margin:0;
padding:0
}
.br_hide {
display:block
}
}
@media only screen and (max-width:360px) and (min-width:321px) {
body {
font-size:15px
}
}
@media only screen and (max-width:385px) and (min-width:361px) {
body {
font-size:15px
}
}
@media only screen and (max-width:415px) and (min-width:386px) {
body {
font-size:16px
}
}
@media only screen and (max-width:431px) and (min-width:415px) {
body {
font-size:14px
}
}
@media only screen and (max-width:480px) and (min-width:431px) {
body {
font-size:18px
}
}
 @media screen and (min-height: 590px) and (max-height: 900px) {
 #camera .mz_img.on {
 position: absolute;
 left: 0;
 bottom: 0;
}
}
